<template>
  <div class="file-upload-container">
    <el-card class="upload-card">
      <template #header>
        <div class="card-header">
          <span>{{ title }}</span>
        </div>
      </template>
      
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 单张图片上传标签 -->
        <el-tab-pane label="单张图片检测" name="image">
          <div class="upload-section">
            <el-upload
              v-model:file-list="imageFileList"
              class="upload-demo"
              action=""
              :auto-upload="false"
              :on-change="handleImageChange"
              :before-upload="beforeImageUpload"
              :limit="1"
            >
              <el-button type="primary">选择图片</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  请上传 JPG/JPEG/PNG 格式图片，大小不超过 10MB
                </div>
              </template>
            </el-upload>
            
            <div class="detection-controls mt-2">
              <el-checkbox v-model="enableHelmetDetection">启用头盔检测</el-checkbox>
              <el-input-number 
                v-model="confidenceThreshold" 
                :min="0.1" 
                :max="1.0" 
                :step="0.05"
                style="width: 150px; margin-left: 20px;"
                label="置信度阈值"
              />
              <el-button 
                type="success" 
                :disabled="!hasImageFile || isProcessing"
                @click="detectImage"
                class="ml-2"
              >
                {{ isProcessing ? '处理中...' : '开始检测' }}
              </el-button>
            </div>
          </div>
          
          <!-- 图片预览与检测结果 -->
          <div v-if="imagePreviewUrl" class="preview-section">
            <div class="preview-container">
              <img :src="resultImageUrl || imagePreviewUrl" class="preview-image" alt="检测预览" />
              <!-- 检测结果覆盖层 -->
              <div v-if="imageDetectionResults.length > 0 && !resultImageUrl" class="detection-overlay">
                <div
                  v-for="(result, index) in imageDetectionResults"
                  :key="index"
                  class="detection-box"
                  :style="{
                    left: result.x + 'px',
                    top: result.y + 'px',
                    width: result.width + 'px',
                    height: result.height + 'px',
                    borderColor: getBoxColor(result.class_name)
                  }"
                >
                  <span 
                    class="detection-label"
                    :style="{ backgroundColor: getBoxColor(result.class_name) }"
                  >
                    {{ getClassNameCN(result.class_name) }} ({{ Math.round(result.confidence * 100) }}%)
                  </span>
                </div>
              </div>
            </div>
            
            <!-- 检测结果统计 -->
            <div v-if="imageDetectionResults.length > 0" class="results-stats">
              <h4>检测结果统计</h4>
              <el-statistic 
                v-for="(count, class_name) in detectionStats" 
                :key="class_name"
                class="stat-item"
                :title="getClassNameCN(class_name)"
                :value="count"
                :value-style="{ color: getBoxColor(class_name) }"
              />
              <div class="processing-info mt-2">
                <el-tag type="info">处理时间: {{ processingTime }}ms</el-tag>
                <el-tag type="success" v-if="timestamp">检测时间: {{ formatDateTime(timestamp) }}</el-tag>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <!-- 批量图片上传标签 -->
        <el-tab-pane label="批量图片检测" name="batch">
          <div class="upload-section">
            <el-upload
              v-model:file-list="batchFileList"
              class="upload-demo"
              action=""
              :auto-upload="false"
              :on-change="handleBatchChange"
              :before-upload="beforeBatchUpload"
              :limit="10"
              multiple
            >
              <el-button type="primary">选择多张图片</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  请上传 JPG/JPEG/PNG 格式图片，最多10张，单张不超过10MB
                </div>
              </template>
            </el-upload>
            
            <div class="detection-controls mt-2">
              <el-checkbox v-model="enableBatchHelmetDetection">启用头盔检测</el-checkbox>
              <el-input-number 
                v-model="batchConfidenceThreshold" 
                :min="0.1" 
                :max="1.0" 
                :step="0.05"
                style="width: 150px; margin-left: 20px;"
                label="置信度阈值"
              />
              <el-button 
                type="success" 
                :disabled="!hasBatchFiles || isProcessing"
                @click="batchDetect"
                class="ml-2"
              >
                {{ isProcessing ? '处理中...' : '批量检测' }}
              </el-button>
            </div>
          </div>
          
          <!-- 批量检测结果 -->
          <div v-if="batchResults.length > 0" class="batch-results">
            <h4>批量检测结果</h4>
            <el-table :data="batchResults" style="width: 100%">
              <el-table-column prop="filename" label="文件名" width="200" />
              <el-table-column prop="detection_count" label="检测数量" width="120" />
              <el-table-column prop="processing_time" label="处理时间(ms)" width="150" />
              <el-table-column prop="statistics" label="检测统计">
                <template #default="scope">
                  <div v-for="(count, class_name) in scope.row.statistics" :key="class_name" class="detection-item">
                    <span :style="{ color: getBoxColor(class_name) }">
                      {{ getClassNameCN(class_name) }}: {{ count }}
                    </span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="batch-summary mt-3">
              <el-tag type="success" size="medium">总文件数: {{ totalFiles }}</el-tag>
              <el-tag type="warning" size="medium" class="ml-2">总检测数: {{ totalDetections }}</el-tag>
            </div>
          </div>
        </el-tab-pane>
        
        <!-- URL分析标签 -->
        <el-tab-pane label="URL图片分析" name="url">
          <div class="upload-section">
            <el-form :model="urlForm" label-width="80px">
              <el-form-item label="图片URL">
                <el-input 
                  v-model="urlForm.url" 
                  placeholder="请输入图片URL地址"
                  style="width: 500px;"
                />
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="enableUrlHelmetDetection">启用头盔检测</el-checkbox>
                <el-input-number 
                  v-model="urlConfidenceThreshold" 
                  :min="0.1" 
                  :max="1.0" 
                  :step="0.05"
                  style="width: 150px; margin-left: 20px;"
                  label="置信度阈值"
                />
              </el-form-item>
              <el-form-item>
                <el-button 
                  type="success" 
                  :disabled="!urlForm.url || isProcessing"
                  @click="analyzeUrl"
                >
                  {{ isProcessing ? '分析中...' : '分析图片' }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <!-- URL分析结果 -->
          <div v-if="urlResultImageUrl" class="preview-section">
            <div class="preview-container">
              <img :src="urlResultImageUrl" class="preview-image" alt="URL分析结果" />
              
              <!-- 检测框覆盖层 -->
              <div v-if="urlDetectionResults.length > 0" class="detection-overlay">
                <div
                  v-for="(result, index) in urlDetectionResults"
                  :key="index"
                  class="detection-box"
                  :style="{
                    left: result.x + 'px',
                    top: result.y + 'px',
                    width: result.width + 'px',
                    height: result.height + 'px',
                    borderColor: getBoxColor(result.class_name)
                  }"
                >
                  <span 
                    class="detection-label"
                    :style="{ backgroundColor: getBoxColor(result.class_name) }"
                  >
                    {{ getClassNameCN(result.class_name) }} ({{ Math.round(result.confidence * 100) }}%)
                  </span>
                </div>
              </div>
            </div>
            
            <!-- URL检测结果统计 -->
            <div v-if="urlDetectionResults.length > 0" class="results-stats">
              <h4>分析结果统计</h4>
              <el-statistic 
                v-for="(count, class_name) in urlDetectionStats" 
                :key="class_name"
                class="stat-item"
                :title="getClassNameCN(class_name)"
                :value="count"
                :value-style="{ color: getBoxColor(class_name) }"
              />
              <div class="processing-info mt-2">
                <el-tag type="info">处理时间: {{ urlProcessingTime }}ms</el-tag>
                <el-tag type="success" v-if="urlTimestamp">检测时间: {{ formatDateTime(urlTimestamp) }}</el-tag>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <!-- 视频上传标签 -->
        <el-tab-pane label="视频检测" name="video">
          <div class="upload-section">
            <el-upload
              v-model:file-list="videoFileList"
              class="upload-demo"
              action=""
              :auto-upload="false"
              :on-change="handleVideoChange"
              :before-upload="beforeVideoUpload"
              :limit="1"
            >
              <el-button type="primary">选择视频</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  请上传 MP4/AVI/MOV/WMV 格式视频，大小不超过 200MB
                </div>
              </template>
            </el-upload>
            
            <div class="video-controls mt-2">
              <el-checkbox v-model="enableVideoHelmetDetection">启用头盔检测</el-checkbox>
              <el-input-number 
                v-model="videoConfidenceThreshold" 
                :min="0.1" 
                :max="1.0" 
                :step="0.05"
                style="width: 150px; margin-left: 20px;"
                label="置信度阈值"
              />
              <el-input-number 
                v-model="frameInterval" 
                :min="1" 
                :max="30" 
                :step="1"
                style="width: 150px; margin-left: 20px;"
                label="帧间隔"
              />
              <el-button 
                type="success" 
                :disabled="!hasVideoFile || isProcessing"
                @click="processVideo"
                class="ml-2"
              >
                {{ isProcessing ? '处理中...' : '分析视频' }}
              </el-button>
              <el-button 
                type="warning" 
                :disabled="!videoPreviewUrl || isPlaying"
                @click="playVideo"
                class="ml-2"
              >
                播放预览
              </el-button>
              <el-button 
                type="info" 
                :disabled="!isPlaying"
                @click="stopVideo"
                class="ml-2"
              >
                停止播放
              </el-button>
            </div>
          </div>
          
          <!-- 视频预览 -->
          <div v-if="videoPreviewUrl" class="preview-section">
            <video 
              ref="videoPlayer" 
              :src="videoPreviewUrl" 
              class="preview-video"
              controls
              @play="isPlaying = true"
              @pause="isPlaying = false"
              @ended="isPlaying = false"
            ></video>
            
            <!-- 视频信息 -->
            <div v-if="videoInfo" class="video-info mt-2">
              <el-tag type="info">时长: {{ videoInfo.duration }}s</el-tag>
              <el-tag type="info" class="ml-2">总帧数: {{ videoInfo.frame_count }}</el-tag>
              <el-tag type="info" class="ml-2">FPS: {{ videoInfo.fps }}</el-tag>
              <el-tag type="success" class="ml-2">处理帧数: {{ videoInfo.frames_processed }}</el-tag>
              <el-tag type="warning" class="ml-2">处理时间: {{ videoInfo.processing_time }}s</el-tag>
            </div>
            
            <!-- 视频分析结果 -->
            <div v-if="videoAnalysisResults && videoAnalysisResults.length > 0" class="video-results">
              <h4>视频分析结果</h4>
              <el-table :data="videoAnalysisResults" style="width: 100%">
                <el-table-column prop="frame_index" label="帧号" width="100" />
                <el-table-column prop="timestamp" label="时间(s)" width="100" />
                <el-table-column prop="statistics" label="检测统计">
                  <template #default="scope">
                    <div v-for="(count, class_name) in scope.row.statistics" :key="class_name" class="detection-item">
                      <span :style="{ color: getBoxColor(class_name) }">
                        {{ getClassNameCN(class_name) }}: {{ count }}
                      </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="detections" label="检测详情">
                  <template #default="scope">
                    <el-popover
                      placement="top"
                      width="200"
                      trigger="hover"
                      :content="formatDetectionDetails(scope.row.detections)"
                    >
                      <template #reference>
                        <el-button type="text" size="small">查看详情</el-button>
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
              </el-table>
              
              <!-- 视频检测统计 -->
              <div v-if="videoStatistics" class="video-stats mt-3">
                <h5>整体检测统计</h5>
                <el-statistic 
                  v-for="(count, class_name) in videoStatistics" 
                  :key="class_name"
                  class="stat-item"
                  :title="getClassNameCN(class_name)"
                  :value="count"
                  :value-style="{ color: getBoxColor(class_name) }"
                />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import * as api from '../api'

export default {
  name: 'FileUpload',
  props: {
    title: {
      type: String,
      default: '文件上传与检测'
    }
  },
  setup() {
    // 状态管理
    const activeTab = ref('image')
    const imageFileList = ref([])
    const videoFileList = ref([])
    const batchFileList = ref([])
    const imagePreviewUrl = ref('')
    const videoPreviewUrl = ref('')
    const urlResultImageUrl = ref('')
    const videoAnalysisResults = ref([])
    const imageDetectionResults = ref([])
    const batchDetectionResults = ref([])
    const urlDetectionResults = ref([])
    const isProcessing = ref(false)
    const isPlaying = ref(false)
    const videoPlayer = ref(null)
    const timestamp = ref('')
    const urlTimestamp = ref('')
    const batchResults = ref([])
    
    // 检测参数配置
    const confidenceThreshold = ref(0.5)
    const enableHelmetDetection = ref(false)
    const videoConfidenceThreshold = ref(0.5)
    const enableVideoHelmetDetection = ref(false)
    const frameInterval = ref(5)
    const batchConfidenceThreshold = ref(0.5)
    const enableBatchHelmetDetection = ref(false)
    const urlConfidenceThreshold = ref(0.5)
    const enableUrlHelmetDetection = ref(false)
    const urlForm = ref({ url: '' })
    
    // 处理时间和统计信息
    const processingTime = ref(0)
    const batchProcessingTime = ref(0)
    const urlProcessingTime = ref(0)
    const videoInfo = ref(null)
    const videoStatistics = ref({})
    
    // 计算属性
    const hasImageFile = computed(() => imageFileList.value.length > 0)
    const hasVideoFile = computed(() => videoFileList.value.length > 0)
    const hasBatchFiles = computed(() => batchFileList.value.length > 0)
    
    // 格式化日期时间
    const formatDateTime = (timestamp) => {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    }
    
    // 检测结果统计
    const detectionStats = computed(() => {
      const stats = {}
      imageDetectionResults.value.forEach(result => {
        const className = result.class_name
        stats[className] = (stats[className] || 0) + 1
      })
      return stats
    })
    
    // 批量检测结果统计
    const batchDetectionStats = computed(() => {
      const stats = {}
      batchDetectionResults.value.forEach(fileResult => {
        if (fileResult.results) {
          fileResult.results.forEach(result => {
            const className = result.class_name
            stats[className] = (stats[className] || 0) + 1
          })
        }
      })
      return stats
    })
    
    // URL检测结果统计
    const urlDetectionStats = computed(() => {
      const stats = {}
      urlDetectionResults.value.forEach(result => {
        const className = result.class_name
        stats[className] = (stats[className] || 0) + 1
      })
      return stats
    })
    
    // 处理标签切换
    const handleTabClick = () => {
      stopVideo()
    }
    
    // 图片上传前检查
    const beforeImageUpload = (file) => {
      const isImage = file.type.startsWith('image/')
      if (!isImage) {
        ElMessage.error('只能上传图片文件！')
        return false
      }
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        ElMessage.error('图片大小不能超过 10MB！')
        return false
      }
      return true
    }
    
    // 视频上传前检查
    const beforeVideoUpload = (file) => {
      const isVideo = file.type.startsWith('video/')
      if (!isVideo) {
        ElMessage.error('只能上传视频文件！')
        return false
      }
      const isLt100M = file.size / 1024 / 1024 < 100
      if (!isLt100M) {
        ElMessage.error('视频大小不能超过 100MB！')
        return false
      }
      return true
    }
    
    // 批量上传前检查
    const beforeBatchUpload = (file) => {
      const isImage = file.type.startsWith('image/')
      if (!isImage) {
        ElMessage.error('只能上传图片文件！')
        return false
      }
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        ElMessage.error('图片大小不能超过 10MB！')
        return false
      }
      return true
    }
    
    // 图片文件变化处理
    const handleImageChange = (file, fileList) => {
      imageFileList.value = fileList.slice(-1) // 只保留最后一个文件
      // 创建预览URL
      const reader = new FileReader()
      reader.onload = (e) => {
        imagePreviewUrl.value = e.target.result
        imageDetectionResults.value = [] // 清除之前的检测结果
      }
      reader.readAsDataURL(file.raw)
    }
    
    // 视频文件变化处理
    const handleVideoChange = (file, fileList) => {
      videoFileList.value = fileList.slice(-1) // 只保留最后一个文件
      // 创建预览URL
      const reader = new FileReader()
      reader.onload = (e) => {
        videoPreviewUrl.value = e.target.result
        videoAnalysisResults.value = [] // 清除之前的分析结果
      }
      reader.readAsDataURL(file.raw)
    }
    
    // 批量文件变化处理
    const handleBatchChange = (file, fileList) => {
      batchFileList.value = fileList.slice(-10) // 只保留最近10个文件
    }
    
    // 执行图片检测
    const detectImage = async () => {
      if (!hasImageFile.value) return
      
      isProcessing.value = true
      try {
        const file = imageFileList.value[0].raw
        const formData = new FormData()
        formData.append('image', file)
        formData.append('confidence_threshold', confidenceThreshold.value)
        formData.append('helmet_detection', enableHelmetDetection.value ? '1' : '0')
        
        const response = await api.upload.detectImage(formData)
        if (response.data && response.data.results) {
          imageDetectionResults.value = response.data.results
          processingTime.value = response.data.processing_time || 0
          timestamp.value = response.data.timestamp || ''
          ElMessage.success(`检测完成，共发现 ${response.data.results.length} 个目标`)
        } else {
          ElMessage.warning('未检测到任何目标')
        }
      } catch (error) {
        console.error('图片检测失败:', error)
        ElMessage.error('图片检测失败，请重试')
      } finally {
        isProcessing.value = false
      }
    }
    
    // 处理批量图片检测
    const batchDetect = async () => {
      if (!hasBatchFiles.value) return
      
      isProcessing.value = true
      try {
        const formData = new FormData()
        batchFileList.value.forEach((file, index) => {
          formData.append('images', file.raw)
        })
        formData.append('confidence_threshold', batchConfidenceThreshold.value)
        formData.append('helmet_detection', enableBatchHelmetDetection.value ? '1' : '0')
        
        const response = await api.upload.batchUpload(formData)
        if (response.data && response.data.results) {
          batchDetectionResults.value = response.data.results
          batchProcessingTime.value = response.data.processing_time || 0
          ElMessage.success(`批量检测完成，处理了 ${response.data.results.length} 个文件`)
        } else {
          ElMessage.warning('批量检测未发现任何目标')
        }
      } catch (error) {
        console.error('批量检测失败:', error)
        ElMessage.error('批量检测失败，请重试')
      } finally {
        isProcessing.value = false
      }
    }
    
    // 处理URL图片分析
    const analyzeUrl = async () => {
      if (!urlForm.url.trim()) {
        ElMessage.warning('请输入图片URL')
        return
      }
      
      isProcessing.value = true
      try {
        const data = {
          url: urlForm.url,
          confidence_threshold: urlConfidenceThreshold.value,
          helmet_detection: enableUrlHelmetDetection.value ? '1' : '0'
        }
        
        const response = await api.upload.analyzeImageUrl(data)
        if (response.data && response.data.results) {
          urlDetectionResults.value = response.data.results
          urlResultImageUrl.value = response.data.image_url || ''
          urlProcessingTime.value = response.data.processing_time || 0
          urlTimestamp.value = response.data.timestamp || ''
          ElMessage.success(`URL图片分析完成，共发现 ${response.data.results.length} 个目标`)
        } else {
          ElMessage.warning('未检测到任何目标')
        }
      } catch (error) {
        console.error('URL图片分析失败:', error)
        ElMessage.error('URL图片分析失败，请检查URL是否有效')
      } finally {
        isProcessing.value = false
      }
    }
    
    // 处理视频分析
    const processVideo = async () => {
      if (!hasVideoFile.value) return
      
      isProcessing.value = true
      try {
        const file = videoFileList.value[0].raw
        const formData = new FormData()
        formData.append('video', file)
        formData.append('confidence_threshold', videoConfidenceThreshold.value)
        formData.append('helmet_detection', enableVideoHelmetDetection.value ? '1' : '0')
        formData.append('frame_interval', frameInterval.value)
        
        const response = await api.upload.processVideo(formData)
        if (response.data && response.data.results) {
          videoAnalysisResults.value = response.data.results
          videoInfo.value = response.data.video_info || {}
          videoStatistics.value = response.data.statistics || {}
          ElMessage.success(`视频分析完成，共分析 ${response.data.results.length} 帧`)
        } else {
          ElMessage.warning('视频分析未发现任何目标')
        }
      } catch (error) {
        console.error('视频分析失败:', error)
        ElMessage.error('视频分析失败，请重试')
      } finally {
        isProcessing.value = false
      }
    }
    
    // 播放视频
    const playVideo = () => {
      if (videoPlayer.value) {
        videoPlayer.value.play()
      }
    }
    
    // 停止视频播放
    const stopVideo = () => {
      if (videoPlayer.value) {
        videoPlayer.value.pause()
        videoPlayer.value.currentTime = 0
      }
      isPlaying.value = false
    }
    
    // 获取检测框颜色
    const getBoxColor = (className) => {
      const colorMap = {
        'person': '#ff4d4f',
        'car': '#1890ff',
        'bicycle': '#52c41a',
        'motorcycle': '#faad14',
        'truck': '#722ed1',
        'helmet': '#52c41a',
        'no_helmet': '#ff4d4f'
      }
      return colorMap[className] || '#d9d9d9'
    }
    
    // 获取中文类别名称
    const getClassNameCN = (className) => {
      const nameMap = {
        'person': '行人',
        'car': '汽车',
        'bicycle': '自行车',
        'motorcycle': '摩托车',
        'truck': '货车',
        'helmet': '戴头盔',
        'no_helmet': '未戴头盔'
      }
      return nameMap[className] || className
    }
    
    // 格式化检测详情
    const formatDetectionDetails = (detections) => {
      if (!detections || detections.length === 0) return '无检测目标'
      return detections.map(d => `${getClassNameCN(d.class_name)} (${(d.confidence * 100).toFixed(1)}%)`).join('\n')
    }
    
    // 返回组件属性和方法
    return {
      activeTab,
      imageFileList,
      videoFileList,
      batchFileList,
      imagePreviewUrl,
      videoPreviewUrl,
      urlResultImageUrl,
      imageDetectionResults,
      videoAnalysisResults,
      batchResults,
      urlDetectionResults,
      isProcessing,
      isPlaying,
      videoPlayer,
      confidenceThreshold,
      enableHelmetDetection,
      videoConfidenceThreshold,
      enableVideoHelmetDetection,
      frameInterval,
      batchConfidenceThreshold,
      enableBatchHelmetDetection,
      urlConfidenceThreshold,
      enableUrlHelmetDetection,
      timestamp,
      urlTimestamp,
      urlForm,
      hasImageFile,
      hasVideoFile,
      hasBatchFiles,
      detectionStats,
      urlDetectionStats,
      videoStatistics,
      processingTime,
      urlProcessingTime,
      handleTabClick,
      handleImageChange,
      handleVideoChange,
      handleBatchChange,
      beforeImageUpload,
      beforeVideoUpload,
      beforeBatchUpload,
      detectImage,
      batchDetect,
      analyzeUrl,
      processVideo,
      playVideo,
      stopVideo,
      getBoxColor,
      getClassNameCN,
      formatDetectionDetails,
      formatDateTime
    }
  }
}
</script>

<style scoped>
.file-upload-container {
  padding: 20px;
}

.upload-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.upload-section {
  margin-bottom: 20px;
}

.video-controls {
  display: flex;
  gap: 10px;
}

.preview-section {
  margin-top: 20px;
}

.preview-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.preview-image {
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
}

.preview-video {
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
}

.detection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.detection-box {
  position: absolute;
  border: 2px solid;
  border-radius: 4px;
  pointer-events: none;
}

.detection-label {
  position: absolute;
  top: -20px;
  left: 0;
  padding: 2px 8px;
  font-size: 12px;
  color: white;
  border-radius: 2px;
  white-space: nowrap;
}

.results-stats {
  margin-top: 20px;
}

.stat-item {
  margin-right: 20px;
  margin-bottom: 10px;
}

.video-results {
  margin-top: 20px;
}

.detection-item {
  margin-bottom: 4px;
}

.mt-2 {
  margin-top: 10px;
}
</style>